<template>
  <div class="contain">
    <div class="header">
    <el-button type="primary" @click="$router.push('/readout')">抄水表</el-button>
    </div>
    <div class="input_modal">
      <!--<div class="input-item">-->
        <!--<span>租客：</span>-->
        <!--<el-input v-model="configList.param.renterNameLike" placeholder="请输入内容" class="proName"  @keyup.enter.native="search"></el-input>-->
      <!--</div>-->
      <div class="input-item">
        <span>小区：</span>
        <el-select v-if="identify == 0" v-model="configList.param.gardenName" placeholder="请选择" @change="handleChangeArea">
          <el-option
            v-for="item in buildingList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-input v-else v-model="configList.param.gardenName" placeholder="请输入内容" class="proName"></el-input>
      </div>
      <div class="input-item" v-if="identify == 0">
        <span>单元：</span>
        <el-select v-if="identify == 0" v-model="configList.param.unitName" placeholder="请选择" @change="handleChangeUnit">
          <el-option
            v-for="item in unitList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-input v-else v-model="configList.param.unitName" placeholder="请输入内容" class="proName"></el-input>
      </div>
      <div class="input-item">
        <span>楼栋：</span>
        <el-select v-if="identify == 0" v-model="configList.param.buildName" placeholder="请选择">
          <el-option
            v-for="item in buildList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-input v-else v-model="configList.param.buildName" placeholder="请输入内容" class="proName"></el-input>
      </div>
      <!--<div class="input-item">-->
        <!--<span>房间号：</span>-->
        <!--<el-input v-model="configList.param.houseRoomNoLike" placeholder="请输入内容" class="proName"></el-input>-->
      <!--</div>-->
      <div class="input-item">
        <span>租客类型：</span>
        <el-select filterable  v-model="configList.param.rentalType" placeholder="请选择">
          <el-option
            v-for="item in rentArr"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="input-item">
        <el-button type="primary" @click="getList">查询</el-button>
      </div>
    </div>
    <div class="table-content">
      <table-list ref="tableList" :tableConfig='configList'>
        <el-table-column class="btn"  label="操作" slot="btn" align="center" min-width="120px" fixed="right">
          <template slot-scope="scope">
            <div style="display: flex;justify-content: center">
              <el-button  @click="$router.push('/getRent?id='+scope.row.id)" type="primary" size="small" v-if="identify == 0 && scope.row.rentalStatus=='rental'">收租</el-button>
              <el-button  @click="handleQuit(scope.row.houseId)" type="primary" size="small" v-if="identify==0 && scope.row.rentalStatus == 'rental'">退租</el-button>
              <el-button  @click="handleDisuse(scope.row.id)" type="primary" size="small" v-if="identify==0 && scope.row.rentalStatus == 'init'">作废</el-button>
            </div>
          </template>
        </el-table-column>
      </table-list>
    </div>

  </div>
</template>
<script>
  let CONSTANT = require("../../constant/constant.js");
  let common = require("../../common.js");
  export default{
    data(){
      return {
        areaId:'',
        unitId:'',
        buildingId:"",
        buildingList: [{
          label: "全部",
          value: null
        }],
        unitList: [{
          label: "全部",
          value: null
        }],
        buildList: [{
          label: "全部",
          value: null
        }],
        rentArr:[{
          label:'全部',
          value:''
        },{
          label:'日租',
          value:'day_rental'
        },{
          label:'长租',
          value:'long_rental'
        },{
          label:'年租',
          value:'year_rental'
        }],
        configList:{
          url:'',
          configList:[
            {
              label:'小区',
              prop:'gardenName',
            },
            {
              label:'单元',
              prop:'unitName',
            },
            {
              label:'楼栋',
              prop:'buildName',
            },
            {
              label:'房间号',
              prop:'houseRoomNo',
            },
            {
              label:'租客',
              prop:'renterName',
            },
            {
              label:'性别',
              prop:'renterSexText',
            },
            {
              label:'租金',
              prop:'rentalRentprice',
            },
            {
              label:'联系电话',
              prop:'renterMobile',
            },
            {
              label:'租客类型',
              prop:'rentalTypeText',
            },
            {
              label:'入住时间',
              prop:'rentalCheckin',
            },
            {
              slot:'btn'
            }
          ],
          param:{
            renterNameLike:null,
            buildName : "",
            gardenName: "",
            unitName: "",
            houseRoomNoLike : "",
            rentalType:'',
            rentalStatus: "rental"
          },
          type:'',
          width:'',
          isPagination:true
        },
      }
    },
    components: {
      'table-list':() => import('../common/my-table')
    },
    created() {
      this.identify = sessionStorage.getItem("identify");
      let url;
      if (this.identify == 1) {
        url = CONSTANT.URL.RENTAL.PAGE
      } else {
        url = CONSTANT.URL.L_RENTAL.FINDPAGE
      }
      this.configList.url = url
    },
    mounted() {
      this.getGardenList()
    },
    methods: {
      getGardenList() {
        let url = this.identify == 1 ? '' : CONSTANT.URL.L_HOUSE.L_GARDEN;
        common.requestAjax(url, {}, {}, (data) => {
          if (data.status ==200) {
            data.data.bussData.map( item => {
              this.buildingList.push({
                label: item,
                value: item
              })
            })
          }
        })
      },
      getUnitList() {
        let url = CONSTANT.URL.L_HOUSE.L_UNIT;
        this.unitList = []
        common.requestAjax(url, {}, {gardenName: this.configList.param.gardenName}, (data) => {
          if (data.status ==200) {
            data.data.bussData.map( item => {
              this.unitList.push({
                label: item,
                value: item
              })
            })
          }
        })
      },
      getBuildingList() {
        let url = CONSTANT.URL.L_HOUSE.L_BUILD;
        this.buildList = []
        common.requestAjax(url, {}, {unitName: this.configList.param.unitName}, (data) => {
          if (data.status ==200) {
            data.data.bussData.map( item => {
              this.buildList.push({
                label: item,
                value: item
              })
            })
          }
        })
      },
      handleChangeArea() {
        this.configList.param.unitName = "";
        this.configList.param.buildName = "";
        this.getUnitList()
      },
      handleChangeUnit() {
        this.configList.param.buildName = "";
        this.getBuildingList()
      },
      getList(){
        this.$refs.tableList.getList()
      },
      selectTable() {

      },
      handleQuit(id) {
        let url = CONSTANT.URL.L_RENTALBACK.CREATEHOUSE
        common.requestAjax(url, {}, {houseId: id}, (res) => {
          if (res.status == 200) {
            this.backParams = {
              id: res.data.bussData.split(",")[0],
              type: res.data.bussData.split(",")[1]
            }
//            if (this.backParams.type == "day_rental") {
//            location.href = "/rentalbackDetail?id="+this.backParams.id+"&type="+this.backParams.type+"&confirm=1"+"&from=renterList"
            this.$router.push("/rentalbackDetail?id="+this.backParams.id+"&type="+this.backParams.type+"&confirm=1"+"&from=renterList")
//            } else {
//              this.dialogVisible1 = true
//            }
          }
          if(res.status == 500) {
            this.$message({
              type: "warning",
              message: res.msg
            })
          }
        })
      },
      handleDisuse(id) {
        let url = CONSTANT.URL.L_RENTAL.DISUSE
        common.requestAjax(url, {}, {id: id}, (res) => {
          if (res.status == 200) {
            this.$message({
              type: "success",
              message: res.msg
            })
            this.getList()
          }
        })
      }
    },
  }
</script>

<style lang="scss">
  .contain {
    .el-dialog__body{ padding-left: 0;padding-top: 30px;border-top:1px solid #dedede;}
    .dialog-con{
      background-color: #f5f5f5;
      display: flex;
      justify-content: space-between;
      ul{
        width:28%;list-style: none;padding:0;font-size:14px;float: left;margin-top:0;z-index:999;
        li{ list-style: none;height:60px;line-height:60px;text-align: center;display: block;}
        li.active{color:#21b5cc;background-color: #fff;font-size:16px;border-right:2px solid #21b5cc;}
        //   li:hover{font-size:16px; }
      }
      .tab-content{ width: 70%;display: inline-block;padding-left:10%;background-color: #fff;min-height:300px;
        .sort{
          .sort_name{ font-weight: 600;margin-bottom: 5px;}
          .group-list{ padding-left: 20px;
            .el-radio{display:block;margin-left: 0;margin-bottom: 3px;}
          }
        }
      }
      .el-button--default{background-color: #fff !important;}
    }
  }
</style>
